<template>
  <div class="box">
    <el-descriptions
      direction="vertical"
      :column="6"
      border
      label-class-name="my-label"
    >
      <el-descriptions-item label="名称" label-align="center" align="center">{{
        topList?.name
      }}</el-descriptions-item>
      <el-descriptions-item
        label="优惠券类型"
        label-align="center"
        align="center"
        >{{
          topList?.type === 0
            ? "全场赠券"
            : topList?.type === 1
            ? "会员赠券"
            : topList?.type === 2
            ? "购物赠券"
            : "注册赠券"
        }}
      </el-descriptions-item>
      <el-descriptions-item
        label="可使用商品"
        label-align="center"
        align="center"
        >{{
          topList?.useType === 1 ? "指定分类" : "全场通用"
        }}</el-descriptions-item
      >
      <el-descriptions-item
        label="使用门槛"
        label-align="center"
        align="center"
      >
        满{{ topList?.minPoint }}元可用
      </el-descriptions-item>
      <el-descriptions-item label="面值" label-align="center" align="center">
        {{ topList?.amount }}元
      </el-descriptions-item>
      <el-descriptions-item label="状态" label-align="center" align="center">
        {{
          Date.parse(topList?.endTime!) - new Date().getTime() >= 0
            ? "未过期"
            : "已过期"
        }}</el-descriptions-item
      >
      <el-descriptions-item label="有效期" label-align="center" align="center"
        >{{ dateFormat(topList?.startTime as any) }}至{{
          dateFormat(topList?.endTime as any)
        }}
      </el-descriptions-item>
      <el-descriptions-item label="总发行量" label-align="center" align="center"
        >{{ topList?.publishCount }}
      </el-descriptions-item>
      <el-descriptions-item label="已领取" label-align="center" align="center"
        >{{ topList?.receiveCount }}
      </el-descriptions-item>
      <el-descriptions-item label="待领取" label-align="center" align="center"
        >{{ topList?.publishCount! - topList?.receiveCount! }}
      </el-descriptions-item>
      <el-descriptions-item label="已使用" label-align="center" align="center"
        >{{ topList?.useCount }}
      </el-descriptions-item>
      <el-descriptions-item label="未使用" label-align="center" align="center">
        {{ topList?.publishCount! - topList?.useCount! }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
  <div class="searchBox">
    <el-card class="box-card" shadow="never">
      <div class="top">
        <div class="top_left">
          <el-icon><Search /></el-icon>
          <span class="search_txt">筛选搜索 </span>
        </div>
        <div class="top_right">
          <el-button type="default" @click="reset">重置</el-button>
          <el-button type="primary" @click="searchParamsFn">查询搜索</el-button>
        </div>
      </div>
      <div class="under">
        <div>
          <span>使用状态： </span>
          <el-select v-model="form.useStatus" class="m-2" placeholder="全部">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div style="margin-left: 10px">
          <span>订单编号： </span>
          <el-input
            size="small"
            placeholder="订单编号"
            v-model="form.orderSn"
          />
        </div>
      </div>
    </el-card>
  </div>
  <div class="table">
    <el-table
      :data="list"
      border
      table-layout="auto"
      cell-class-name="align-c"
      header-row-class-name="align-c"
    >
      <el-table-column label="优惠码" prop="couponCode" />
      <el-table-column label="领取会员" prop="memberNickname" />
      <el-table-column label="领取方式" prop="getType">
        <template #default="{ row }">
          <span>{{ row.getType == 1 ? "主动获取" : "" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="领取时间" prop="createTime">
        <template #default="{ row }">
          <span>{{ dateFormat(row.createTime) }}</span></template
        ></el-table-column
      >
      <el-table-column label="当前状态" prop="couponCode">
        <template #default="{ row }">
          <span>{{
            row.useStatus == 0
              ? "未使用"
              : row.useStatus == 1
              ? "已使用"
              : "已过期"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="使用时间" prop="useTime">
        <template #default="{ row }">
          <span>{{ dateFormat(row.useTime) }}</span></template
        ></el-table-column
      >
      <el-table-column label="订单编号" prop="orderSn">
        <template #default="{ row }">
          <span>{{ row.orderSn }}</span></template
        >
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-config-provider :locale="locale">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageChangeHandle"
        @current-change="pageSizeChangeHandle"
    /></el-config-provider>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { dateFormat } from "@/utils/index";
import { useRoute } from "vue-router";
import { Search, Tickets } from "@element-plus/icons-vue";
import { getCouponApi, getCouponHistoryApi } from "./api";
import useTable from "@/hooks/useTable";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
const locale = zhCn;
const route = useRoute();
const topList = ref<ICouponList>();
const form = reactive({
  useStatus: "",
  orderSn: "",
  couponId: 0,
});
const status = [
  {
    value: "0",
    label: "未使用",
  },
  {
    value: "1",
    label: "已使用",
  },
  {
    value: "2",
    label: "已过期",
  },
];
form.couponId = parseInt(route.query.id as string);
const getCoupon = () => {
  getCouponApi(parseInt(route.query.id as string)).then((res) => {
    if (res.code === 200) {
      topList.value = res.data;
    }
  });
};
// 重置
const reset = () => {
  form.orderSn = "";
  form.useStatus = "";
  searchParamsFn();
};
const {
  list,
  pageNum,
  total,
  pageChangeHandle,
  pageSizeChangeHandle,
  pageSize,
  searchParamsFn,
} = useTable(getCouponHistoryApi, form);

getCoupon();
</script>

<style lang="less" scoped>
.box {
  display: flex;
  text-align: center;
  justify-content: center;
  margin-top: 50px;
  :deep(.el-descriptions) {
    width: 80%;
  }
}
.searchBox {
  width: 80%;
  margin: 20px auto;
  :deep(.el-card) {
    padding: 20px;
    border: 1px solid #ebeef5;
  }
  .top {
    position: relative;
    display: flex;
    .top_left {
      .search_txt {
        padding-left: 10px;
        font-size: 14px;
      }
    }
    .top_right {
      position: absolute;
      right: 20px;
    }
  }
  .under {
    display: flex;
    padding: 20px 40px 0;
    font-size: 14px;
    :deep(.el-input) {
      height: 32px;
      line-height: 32px;
      width: 210px;
    }
  }
}
.table {
  width: 80%;
  margin: auto;
}
:deep(.align-c) {
  .cell {
    text-align: center !important;
    font-size: 12px;
  }
}
.page {
  display: flex;
  justify-content: flex-end;
}
</style>
